<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>自定义组件的 v-model</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../vue.js"></script>

  </head>
  <body>

    <!-- app -->
    <div id="app">自定义事件 — Vue.js<br />
      https://cn.vuejs.org/v2/guide/components-custom-events.html<br />
      <br />
      自定义组件的 v-model</br >
      
      <br />
      <base-checkbox v-model="lovingVue"></base-checkbox>
      <div>{{lovingVue}}</div>
    </div>

    <script>

// 定义一个新组件
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

var app = new Vue({
  el: '#app',
  data : {
    lovingVue : false
  },
  // components:{CustomInput},
  created: function () {
    // `this` 指向 vm 实例
    var fileName = 'uni-tabs1/uni-tabs2.nvue';
    var a = fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    console.log(a)
  }
})


    </script>
  </body>
</html>
